<script setup lang="ts">
import { ref,reactive } from "vue";
import {useRenderIcon} from "@/components/ReIcon/src/hooks";
import {Minus, Plus,CloseBold} from '@element-plus/icons-vue'
// 声明 props 类型
export interface FormProps {
  formInline: {
    name:'',json:{op:'AND',node:[]}
  };
}
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({ name:'',json:{
      op:'AND',
      node:[
        {
          op:'AND',
          child:[
            {field:'platformOrderId',rule:'=',value:''}
          ],
        },
        {
          op:'OR',
          child:[
            {field:'salesRecordNumber',rule:'=',value:''}
          ],
        }
      ],
    } })
});

const newFormInline = ref(props.formInline);
const handleClose = (tag: string) => {
  //newFormInline.value.selectOrders.splice(newFormInline.value.selectOrders.indexOf(tag), 1)
}
const ruleFormRef = ref();
function getRef() {
  return ruleFormRef.value;
}

const formRules = reactive({
  name: [{ required: true, message: "视图名称不能为空", trigger: "blur" }],
  json: [{ required: true, message: "条件不能为空", trigger: "blur" }],
});
defineExpose({ getRef });



const selectField = [
  {field:'platformOrderId',name:'订单编号',type:'text',select:[]},
  {field:'salesRecordNumber',name:'平台交易号',type:'text',select:[]},
  {field:'currencyId',name:'币种',type:'select',select:[]},
  {field:'email',name:'邮箱',type:'text',select:[]},
  {field:'city',name:'城市',type:'text',select:[]},
  {field:'phone1',name:'电话',type:'text',select:[]},
  {field:'countryNameCN',name:'国家',type:'text',select:[]},
]
function addBig(){
  newFormInline.value.json.node.push({
    op:'AND',
    child:[
      {field:'platformOrderId',rule:'=',value:''}
    ]
  })
}
function addSmall(item){
  item.child.push({field:'platformOrderId',rule:'=',value:''})
}
function RemoveSmall(item1,item2){
  const index = item1.child.indexOf(item2)
  if (index !== -1) {
    item1.child.splice(index, 1)
  }
  if(item1.child.length==0){
    RemoveBig(item1)
  }
}
function RemoveBig(obj){
  const index = newFormInline.value.json.node.indexOf(obj)
  if (index !== -1) {
    newFormInline.value.json.node.splice(index, 1)
  }
}
</script>
<template>
  <el-form :model="newFormInline" ref="ruleFormRef" :rules="formRules" label-width="90px" size="small">
    <el-form-item label="视图名称" prop="name">
      <el-input v-model="newFormInline.name" class="!w-[220px]" placeholder="请输入视图名称"/>
    </el-form-item>
    <el-form-item label="视图范围" prop="json"></el-form-item>
    <el-row class="rowItemBox">
      <el-col :span="3" class="center" style="padding-right:20px;">
        <el-select v-model="newFormInline.json.op"  size="small" >
          <el-option v-for="(ite, index) in ['AND','OR']" :label="ite" :value="ite"/>
        </el-select>
      </el-col>
      <el-col :span="20">
        <el-row :gutter="20" v-for="item in newFormInline.json.node" class="itemBox">
          <el-col :span="4" class="center" >
            <el-select v-model="item.op"  size="small" >
              <el-option v-for="(ite, index) in ['AND','OR']" :label="ite" :value="ite"/>
            </el-select>
          </el-col>
          <el-col :span="20">
            <el-row :gutter="10"  v-for="item2 in item.child" style="margin-bottom:5px;">
              <el-col :span="7">
                <el-select v-model="item2.field"  size="small" width="80px" >
                  <el-option v-for="(it, index) in selectField" :label="it.name" :value="it.field"/>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select v-model="item2.rule"  size="small"  width="80px">
                  <el-option v-for="(it, index) in ['=','>','<']" :label="it" :value="it"/>
                </el-select>
              </el-col>
              <el-col :span="7">
                <el-input v-model="item2.value"  size="small" width="80px"  placeholder="请输入值"/>
              </el-col>
              <el-col :span="4">
                <el-button :icon="Plus" circle size="small"  @click="addSmall(item)"/>
                <el-button :icon="Minus" circle size="small"  @click="RemoveSmall(item,item2)"/>
              </el-col>
            </el-row>
          </el-col>
            <el-button  :icon="CloseBold" circle class="itemBoxAction" @click="RemoveBig(item)"/>
        </el-row>
        <el-button link type="primary" :icon="useRenderIcon('ri:add-circle-line')" style="margin-left:-15px;" @click="addBig()">添加条件组</el-button>

      </el-col>
    </el-row>

  </el-form>
</template>

<style scoped>
.center{
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}
.rowItemBox{
  background: #efefef;
  padding: 30px 10px 25px 20px;
  margin: 0 30px 20px 30px;
  border-radius: 5px;
  width: 680px;
}
.itemBox{
  position: relative;
  border: 1px dashed gray;padding:10px;margin-bottom:20px;
}
.itemBoxAction{
  position: absolute; /* 绝对定位 */
  top: -13px; /* 距离顶部 10px */
  right: -13px; /* 距离右侧 10px */
  background-color: lightblue;
}
</style>
